<template>
    <rx-layout>
        <template v-slot:center>
            <view class="BpmTaskTransferEdit">
                <view style="color: #4d9eff;display:inline-block;padding-bottom: 16px;">{{subject}}</view>
                <view style="margin-bottom: 0.5rem">
                    <view style="margin-bottom: 0.25rem">{{i18n('forward','抄送人')}}</view>
                    <RxVueUserDialog v-model="copyUsers" :single="false"></RxVueUserDialog>
                </view>
                <view>
                    <view>{{i18n('opinion','意见')}}</view>
                    <textarea class="BpmTaskTransferEdit-textarea" v-model="form.opinion" :placeholder="i18n('msg2','请输入意见')" />
                </view>
            </view>
        </template>
        <template v-slot:footer>
            <view class="bpm-footer">
                <view @click="closeWindow" class="bpm-footer-close">{{i18n('close','取消')}}</view>
                <view @click="handTrans" class="bpm-footer-ok">{{i18n('ok','确定')}}</view>
            </view>
        </template>
    </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout';
import RxVueUserDialog from '@/components/RxVueUserDialog';
import MainLayoutApi from "../../../api/MainLayout/MainLayoutApi";
export default {
    name: "BpmInstTransfer",
    components: {
        RxLayout,
        RxVueUserDialog
    },
    data(){
        return{
            form: {
                copyUsers: "",
                opinion: "",
                send: true,
                instId:''
            },
            copyUsers:[],
            subject:''
        }
    },
    onLoad(option) {
        this.form.instId = option.instId
        this.subject = option.subject
    },
    created(){

    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTaskLang.BpmInstTakeBack",key);
        },
        handTrans() {
            if (this.copyUsers.length == 0) {
                this.$message.warning(this.i18n('selectExecutorTips','请选择执行人!'));
                return;
            }
            this.form.copyUsers = JSON.stringify(this.copyUsers);
            MainLayoutApi.transfer(this.form).then(res=>{
                this.$message.warning(res.message);
                this.clickNavLeft()
            })
        },
        closeWindow() {
            this.clickNavLeft()
        },
    }
}
</script>

<style scoped>
.BpmTaskTransferEdit{
    background: white;
    border-radius: 5px;
    padding: 0.5rem;
}
.bpm-footer {
    display: flex;
    grid-gap: 10px;
}
.BpmTaskTransferEdit-textarea {
    font-size: 0.8rem;
    height: 124px;
    width: calc(100% - 1rem) !important;
    margin-top: 15px;
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    padding: 10px 10px 10px 10px;
}

.bpm-footer-close {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.65);
}

.bpm-footer-ok {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(66, 133, 244, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: white;
}
</style>
